<template>
  <div class="app-container flex column">
    <div class="flex align-center" style="position: relative">
      <top-title :policeView="true" :cusString="cusString"></top-title>
      <div class="refreshData" @click="refreshData" v-if="policeAgencyIdList.length > 0">返回</div>
    </div>
    <div class="content-wrap f1 flex column">
      <!-- 搜索栏 -->
      <div class="search-group">
        <div class="input-wrap">
          <div class="label">机关名称:</div>
          <div class="input-item">
            <a-tree-select
              style="width: 100%"
              :treeData="treeData"
              tree-default-expand-all
              placeholder="请选择机关"
              v-model="queryParam.policeAgencyId"
              @change="handelChangeSelet"
              :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
              :replaceFields="{ label: 'policeAgencyName', key: 'id', value: 'id' }"
            />
          </div>
        </div>

        <div class="btn-wrap">
          <a-button class="searchBtn" @click="searchQuery()" type="primary"> 搜索 </a-button>
          <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
        </div>

        <div class="btn-group">
          <a-button
            class="exportBtn"
            @click="handleExportXls(`${cusString}`, { policeAgencyId: queryParam.policeAgencyId })"
            type="primary"
          >
            导出Excel
          </a-button>
        </div>
      </div>

      <div class="table-wrap f1">
        <a-table
          bordered
          class="tableList"
          :scroll="{ x: 999, y: 500 }"
          rowKey="policeAgencyId"
          :pagination="false"
          :columns="cusColumns"
          :dataSource="dataSource"
          :customHeaderRow="Rowclick"
        >
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import fs from 'file-saver'
import topTitle from '@/components/topTitle'
import startEndTime from '@/components/startEndTime'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'
import { getOneFlagTreeList } from '@/api/api'
export default {
  name: 'policeInspector',
  components: { topTitle, startEndTime },
  mixins: [JeecgListMixin],
  data() {
    return {
      cusString: '',
      url: {
        list: '/company/message_tube/list',
        exportXlsUrl: '/company/message_tube/list/export',
      },
      disableMixinCreated: true,
      treeData: [],
      cusColumns: [],
      policeAgencyIdList: [],
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
      ],
    }
  },
  mounted() {
    this.loadData()
    this.loadTree()
  },
  methods: {
    customCell(record, rowIndex, column) {
      // column add from 3.0
      let _this = this
      return {
        on: {
          click: (event) => {
            let policeAgencyId = record.policeAgencyId
            let dataIndex = event.target.__vue__.column.dataIndex

            if (rowIndex !== 0 && dataIndex == 'policeAgencyName') {
              this.policeAgencyIdList.push(policeAgencyId)
              this.queryParam.policeAgencyId = this.policeAgencyIdList.at(-1)
              this.loadData()
            }
            if (dataIndex !== 'policeAgencyName') {
              // 查找对应行业
              let { title } = this.cusColumns.filter((item) => {
                if (dataIndex.includes(item.dataIndex)) {
                  return item
                }
              })[0]

              let params = { industryInformationIdAndType: dataIndex, policeAgencyId, title }

              if (dataIndex.includes('total')) {
                params.type = '总数'
                this.$router.push({ path: '/dataStatistics/detail', query: params })
              } else if (dataIndex.includes('not')) {
                params.type = '未列管'
                this.$router.push({ path: '/dataStatistics/detail', query: params })
              } else {
                params.type = '已列管'
                this.$router.push({ path: '/dataStatistics/hasdetail', query: params })
              }
            }
          },
        },
      }
    },

    Rowclick(record, index) {
      return {
        on: {
          click: (event) => {
            let title = event.target.innerText
            console.log(title, 'dataStatistics/index')
            if (title.includes('总数') || title.includes('未列管') || title.includes('已列管')) return
            let res = this.cusColumns.filter((item) => {
              if (item.title == event.target.innerText) {
                return item
              }
            })
            let params = {
              industryInformationId: res[0].dataIndex,
              policeAgencyId: this.dataSource[0].policeAgencyId,
              title,
            }
            this.$router.push({ path: '/dataStatistics/policeTask', query: params })
          },
        },
      }
    },

    refreshData() {
      this.policeAgencyIdList.pop()
      this.queryParam.policeAgencyId = this.policeAgencyIdList.at(-1)
      this.loadData()
    },

    searchReset() {
      this.queryParam = {}
      this.policeAgencyIdList = []
      this.loadData()
    },

    async loadData() {
      let { result } = await getAction(this.url.list, this.queryParam)
      this.cusColumns = this.columns.concat(result.columnList)
      this.allChildrenAddValue(this.cusColumns) //递归塞值
      this.dataSource = result.lineList

      let res = this.getNodeById(this.treeData, this.policeAgencyIdList.at(-1))
      this.cusString = (res == undefined ? `陕西省公安厅` : res.policeAgencyName) + '下各行业场所数量统计表'
    },

    allChildrenAddValue(node) {
      for (const item of node) {
        if (item.title && item.title !== '序号' && !item.children) {
          item.width = 100
          item.align = 'center'
          item.customCell = this.customCell
          if (item.title == '机关名称') item.width = 150
        }
        if (item.children) {
          this.allChildrenAddValue(item.children)
        }
      }
      return node
    },

    loadTree() {
      getOneFlagTreeList().then((res) => {
        if (res.code == 200) {
          this.treeData = res.result
        }
      })
    },

    getNodeById(list, id) {
      if (id == '') return { policeAgencyName: '暂无' }
      for (const item of list) {
        if (item.id === id) return item
        if (item.children) {
          const res = this.getNodeById(item.children, id)
          if (res) return res
        }
      }
    },

    handelChangeSelet() {
      this.$forceUpdate()
    },

    // 导出当前页
    exportExcel() {
      const wb = XLSX.utils.table_to_book(document.querySelector('#a-table'))

      const wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array',
      })
      try {
        fs.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '检查数据.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
    },
  },
  destroy() {},
}
</script>

<style scoped lang="less">
/deep/ .ant-table-body {
  border: 1px solid #0a5297 !important;
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    border: 1px solid #0a5297 !important;
  }
}

/deep/ .ant-table-row-cell-break-word:hover {
  background: #1388ff !important;
  cursor: pointer;
}

/deep/ .ant-table-bordered .ant-table-header > table,
.ant-table-bordered .ant-table-body > table,
.ant-table-bordered .ant-table-fixed-left table,
.ant-table-bordered .ant-table-fixed-right table {
  border: 1px solid #0a5297 !important;
}
/deep/ .ant-table-fixed .ant-table-thead > tr > th {
  color: #719bbc;
  border: 1px solid #0a5297 !important;
}
/deep/ .ant-table-header {
  background: var(--theme-content-bg);
}

/deep/ .ant-table-hide-scrollbar {
  overflow: auto !important;
}

/deep/ .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
  background: #0a5297;
}

.refreshData {
  width: 60px;
  height: 30px;
  font-size: 16px;
  color: #0e2b48;
  background: #1388ff;
  border-radius: 4px;
  line-height: 30px;
  text-align: center;
  position: absolute;
  right: 0px;
  // cursor: pointer;
}

.app-container {
  background: var(--theme-content-bg);
  padding-top: 0;
  padding-bottom: 0;
  .content-wrap {
    background: var(--theme-container-bg);
    overflow: hidden;
    .table-wrap {
      padding: 0 20px;
      overflow: auto;
    }
  }
}
</style>
